<template>
  <div class="container">
    <!-- 添加页面导航 -->
    <PageNavigation pageTitle="系统设置" />
    
    <div class="page-header">
      <h2>系统设置</h2>
      <p>管理系统配置参数</p>
    </div>

    <el-tabs v-model="activeTab">
      <!-- 基本设置 -->
      <el-tab-pane label="基本设置" name="basic">
        <el-form ref="basicFormRef" :model="basicForm" label-width="120px" :rules="basicRules">
          <el-card class="setting-card">
            <template #header>
              <div class="card-header">
                <span>网站信息</span>
              </div>
            </template>
            <el-form-item label="网站名称" prop="siteName">
              <el-input v-model="basicForm.siteName" />
            </el-form-item>
            <el-form-item label="网站描述" prop="siteDesc">
              <el-input v-model="basicForm.siteDesc" type="textarea" rows="3" />
            </el-form-item>
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model="basicForm.contactPhone" />
            </el-form-item>
            <el-form-item label="联系邮箱" prop="contactEmail">
              <el-input v-model="basicForm.contactEmail" />
            </el-form-item>
            <el-form-item label="备案信息" prop="icp">
              <el-input v-model="basicForm.icp" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
            </el-form-item>
          </el-card>
        </el-form>
      </el-tab-pane>

      <!-- 上传设置 -->
      <el-tab-pane label="上传设置" name="upload">
        <el-form ref="uploadFormRef" :model="uploadForm" label-width="120px" :rules="uploadRules">
          <el-card class="setting-card">
            <template #header>
              <div class="card-header">
                <span>文件上传配置</span>
              </div>
            </template>
            <el-form-item label="上传路径" prop="uploadPath">
              <el-input v-model="uploadForm.uploadPath" />
            </el-form-item>
            <el-form-item label="上传类型" prop="uploadType">
              <el-select v-model="uploadForm.uploadType" style="width: 100%">
                <el-option label="本地存储" value="local" />
                <el-option label="阿里云存储" value="aliyun" />
                <el-option label="腾讯云存储" value="qcloud" />
              </el-select>
            </el-form-item>
            <el-form-item label="允许上传类型" prop="allowedExtensions">
              <el-input v-model="uploadForm.allowedExtensions" placeholder="如: jpg,png,gif,jpeg" />
            </el-form-item>
            <el-form-item label="最大文件大小" prop="maxSize">
              <el-input-number v-model="uploadForm.maxSize" :min="1" :max="100" />
              <span class="unit-label">MB</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveUploadSettings">保存设置</el-button>
            </el-form-item>
          </el-card>
        </el-form>
      </el-tab-pane>

      <!-- 安全设置 -->
      <el-tab-pane label="安全设置" name="security">
        <el-form ref="securityFormRef" :model="securityForm" label-width="150px" :rules="securityRules">
          <el-card class="setting-card">
            <template #header>
              <div class="card-header">
                <span>登录安全</span>
              </div>
            </template>
            <el-form-item label="密码最小长度" prop="passwordMinLength">
              <el-input-number v-model="securityForm.passwordMinLength" :min="6" :max="20" />
              <span class="unit-label">字符</span>
            </el-form-item>
            <el-form-item label="密码复杂度要求">
              <el-checkbox-group v-model="securityForm.passwordComplexity">
                <el-checkbox label="number">必须包含数字</el-checkbox>
                <el-checkbox label="lowercase">必须包含小写字母</el-checkbox>
                <el-checkbox label="uppercase">必须包含大写字母</el-checkbox>
                <el-checkbox label="special">必须包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="登录失败锁定阈值" prop="loginRetryLimit">
              <el-input-number v-model="securityForm.loginRetryLimit" :min="3" :max="10" />
              <span class="unit-label">次</span>
            </el-form-item>
            <el-form-item label="锁定时间" prop="lockoutDuration">
              <el-input-number v-model="securityForm.lockoutDuration" :min="5" :max="60" />
              <span class="unit-label">分钟</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
            </el-form-item>
          </el-card>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import PageNavigation from '@/components/common/PageNavigation.vue'

// 当前活动标签页
const activeTab = ref('basic')

// 基本设置表单
const basicFormRef = ref(null)
const basicForm = reactive({
  siteName: '吉居榭房产平台',
  siteDesc: '为您提供优质的房产服务，帮助您找到理想的家',
  contactPhone: '+0377 8888 8888',
  contactEmail: '2115925441@yict.edu.cn',
  icp: '京ICP备12345678号'
})

// 上传设置表单
const uploadFormRef = ref(null)
const uploadForm = reactive({
  uploadPath: 'D:/jijuxie/upload/',
  uploadType: 'local',
  allowedExtensions: 'jpg,png,gif,jpeg,doc,docx,pdf,xls,xlsx,zip',
  maxSize: 10
})

// 安全设置表单
const securityFormRef = ref(null)
const securityForm = reactive({
  passwordMinLength: 8,
  passwordComplexity: ['number', 'lowercase'],
  loginRetryLimit: 5,
  lockoutDuration: 15
})

// 表单验证规则
const basicRules = {
  siteName: [
    { required: true, message: '请输入网站名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  contactPhone: [
    { pattern: /^[\d\s\+\-]+$/, message: '请输入有效的电话号码', trigger: 'blur' }
  ],
  contactEmail: [
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ]
}

const uploadRules = {
  uploadPath: [
    { required: true, message: '请输入上传路径', trigger: 'blur' }
  ],
  uploadType: [
    { required: true, message: '请选择上传类型', trigger: 'change' }
  ],
  allowedExtensions: [
    { required: true, message: '请输入允许上传的文件类型', trigger: 'blur' }
  ],
  maxSize: [
    { required: true, message: '请输入最大文件大小', trigger: 'blur' }
  ]
}

const securityRules = {
  passwordMinLength: [
    { required: true, message: '请设置密码最小长度', trigger: 'blur' }
  ],
  loginRetryLimit: [
    { required: true, message: '请设置登录失败锁定阈值', trigger: 'blur' }
  ],
  lockoutDuration: [
    { required: true, message: '请设置锁定时间', trigger: 'blur' }
  ]
}

// 初始化页面
onMounted(() => {
  // 这里可以调用API获取当前系统设置
})

// 保存基本设置
const saveBasicSettings = async () => {
  if (!basicFormRef.value) return
  try {
    await basicFormRef.value.validate()
    // 这里调用API保存设置
    ElMessage.success('基本设置保存成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 保存上传设置
const saveUploadSettings = async () => {
  if (!uploadFormRef.value) return
  try {
    await uploadFormRef.value.validate()
    // 这里调用API保存设置
    ElMessage.success('上传设置保存成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 保存安全设置
const saveSecuritySettings = async () => {
  if (!securityFormRef.value) return
  try {
    await securityFormRef.value.validate()
    // 这里调用API保存设置
    ElMessage.success('安全设置保存成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  margin: 0 0 10px 0;
}

.page-header p {
  color: #666;
  margin: 0;
}

.setting-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unit-label {
  margin-left: 10px;
  color: #666;
}
</style> 